<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue';

import { h, reactive, ref, watch } from 'vue';

import {
  MinusOutlined,
  PlusOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import {
  getChargeStandardOrgApi,
  getChargeStandardUpdateApi,
  updateChargeStandardApi,
} from '#/api';

interface FormData {
  label: string;
  value: string;
}

const props = defineProps<{
  data?: any;
  open?: boolean;
  title?: string;
}>();
const emit = defineEmits([
  'update:open',
  'submit',
  'handleClose',
  'handleSave',
]);
const SelectOptions = ref<FormData[]>([]);
const getSelectOptions = async () => {
  const res = await getChargeStandardOrgApi();

  // console.log(res);
  SelectOptions.value = res.map((item: any) => {
    return {
      label: item.comName,
      value: item.comId,
    };
  });
};
getSelectOptions();

// 处理文件上传
const fileList = ref<any[]>([]);
const beforeUpload = (file: File) => {
  fileList.value = [file];
  return false;
};

const rules = {
  regionID: [{ required: true, message: '请选择子公司' }],
  jfbzName: [{ required: true, message: '请输入标准名称' }],
  beginUseDate: [{ required: true, message: '请选择开始使用日期' }],
  endUseDate: [{ required: true, message: '请选择结束使用日期' }],
  year: [{ required: true, message: '请输入供暖年度' }],
  maxTrimZeroMoney: [
    { required: true, message: '请输入最大抹零金额' },
    {
      type: 'float',
      min: -1,
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('抹零金额必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  precisionUnit: [{ required: true, message: '请选择热费精确计算单位' }],
  roundingCalculationRule: [{ required: true, message: '请选择舍入计算规则' }],
  onAccount: [{ required: true, message: '请选择是否允许挂账' }],
  discountType: [{ required: true, message: '请选择优惠类型' }],
};

const formState = reactive({
  jfbzID: '',
  regionID: undefined,
  jfbzName: '',
  beginUseDate: '',
  endUseDate: '',
  year: '',
  maxTrimZeroMoney: '',
  precisionUnit: undefined,
  roundingCalculationRule: undefined,
  onAccount: undefined,
  discountType: '无优惠',
});

const rules_1 = {
  discountAmount: [
    { required: true, message: '请输入优惠金额' },
    {
      type: 'float',
      min: -1,
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('优惠金额必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  discountRate: [
    { required: true, message: '请输入优惠比例' },
    {
      type: 'float',
      min: 0,
      max: 100,
      message: '优惠比例必须在0-100之间',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('优惠金额必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  discountTime: [{ required: true, message: '请选择优惠时段' }],
};

const rules_2 = {
  heatingStartDate: [{ required: true, message: '请选择供暖开始日期' }],
  heatingEndDate: [{ required: true, message: '请选择供暖结束日期' }],
  suspensionStartDate: [{ required: true, message: '请选择停供开始申请日期' }],
  suspensionEndDate: [{ required: true, message: '请选择停供结束申请日期' }],
  jmAreaPrice: [
    { required: true, message: '请输入居民面积单价' },
    {
      type: 'float',
      min: -1,
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject('单价必须大于等于0');
        }
        return Promise.resolve();
      },
    },
  ],
  fjmAreaPrice: [
    { required: true, message: '请输入非居民面积单价' },
    {
      type: 'float',
      min: -1,
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject('单价必须大于等于0');
        }
        return Promise.resolve();
      },
    },
  ],
  jyAreaPrice: [
    { required: true, message: '请输入经营面积单价' },
    {
      type: 'float',
      min: -1,
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject('单价必须大于等于0');
        }
        return Promise.resolve();
      },
    },
  ],
  bgAreaPrice: [
    { required: true, message: '请输入办公面积单价' },
    {
      type: 'float',
      min: -1,
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject('单价必须大于等于0');
        }
        return Promise.resolve();
      },
    },
  ],
  heatingDays: [
    { required: true, message: '请输入供热天数' },
    {
      type: 'float',
      min: 1,
      message: '供热天数必须大于0',
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject('单价必须大于等于0');
        }
        return Promise.resolve();
      },
    },
  ],
  suspensionRate: [
    { required: true, message: '请输入热损比例' },
    {
      type: 'float',
      min: 0,
      max: 100,
      message: '热损比例必须在0-100之间',
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject('单价必须大于等于0');
        }
        return Promise.resolve();
      },
    },
  ],
};

const rules_3 = {
  coolinStartDate: [{ required: true, message: '请选择制冷开始日期' }],
  coolingEndDate: [{ required: true, message: '请选择制冷结束日期' }],
  jmCoolingPrice: [
    { required: true, message: '请输入居民制冷单价' },
    {
      type: 'number',
      min: 0,
      message: '单价必须大于等于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  fjmCoolingPrice: [
    { required: true, message: '请输入非居民制冷单价' },
    {
      type: 'number',
      min: 0,
      message: '单价必须大于等于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  jyCoolingPrice: [
    { required: true, message: '请输入经营制冷单价' },
    {
      type: 'number',
      min: 0,
      message: '单价必须大于等于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  bgCoolingPrice: [
    { required: true, message: '请输入办公制冷单价' },
    {
      type: 'number',
      min: 0,
      message: '单价必须大于等于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  coolingDays: [
    { required: true, message: '请输入制冷天数' },
    {
      type: 'number',
      min: 1,
      message: '制冷天数必须大于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
};

const rules_4 = {
  lateFeeMethod: [{ required: true, message: '请选择滞纳金计算方式' }],
  lateFeeStartDate: [{ required: true, message: '请选择滞纳金开始日期' }],
  lateFeeEndDate: [{ required: true, message: '请选择滞纳金结束日期' }],
  lateFeeRange: [{ required: true, message: '请输入滞纳金收取范围' }],
  lateFeeAmount: [
    { required: true, message: '请输入滞纳金额' },
    {
      type: 'number',
      min: 0,
      message: '滞纳金额必须大于等于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  lateFeeRate: [
    { required: true, message: '请输入滞纳金率' },
    {
      type: 'number',
      min: 0,
      max: 100,
      message: '滞纳金率必须在0-100之间',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
  lateFeeCalculationbase: [
    { required: true, message: '请输入滞纳金计算基数' },
    {
      type: 'number',
      min: 0,
      message: '计算基数必须大于等于0',
      validator: (rule: any, value: any) => {
        if (value < 0) {
          return Promise.reject(new Error('单价必须大于等于0'));
        }
        return Promise.resolve();
      },
    },
  ],
};
const formState_1 = reactive({
  discountAmount: '',
  discountRate: '',
});
const formState_1_list = reactive([]);
const formState_2 = reactive({
  heatingStartDate: '',
  heatingEndDate: '',
  suspensionStartDate: '',
  suspensionEndDate: '',
  jmAreaPrice: '',
  fjmAreaPrice: '',
  jyAreaPrice: '',
  bgAreaPrice: '',
  heatingDays: '',
  suspensionRate: '',
});
const formState_3 = reactive({
  coolinStartDate: '',
  coolingEndDate: '',
  jmCoolingPrice: '',
  fjmCoolingPrice: '',
  jyCoolingPrice: '',
  bgCoolingPrice: '',
  coolingDays: '',
});
const formState_4 = reactive({
  lateFeeMethod: undefined,
  lateFeeStartDate: '',
  lateFeeEndDate: '',
  lateFeeRange: '',
  lateFeeAmount: '',
  lateFeeRate: '',
  lateFeeCalculationbase: '',
});
const labelCol = { style: { width: '130px' } };
const drawerVisible = ref(props.open || false);

const onAdd = () => {
  formState_1_list.push({
    discountAmount: '',
    discountRate: '',
    discountStartDate: '',
    discountEndDate: '',
  });
};
const onDelete = () => {
  formState_1_list.pop();
};
watch(
  () => props.open,
  (val) => {
    drawerVisible.value = val;
  },
);

// 监听数据变化，填充表单
watch(
  () => props.data,
  (val) => {
    // console.log(val);
    if (val.discountType === '分时段优惠') {
      getChargeStandardUpdateApi(val.jfbzID).then((res: any) => {
        console.log(res);
        const formData = { ...val, discountList: res };
        if (val && Object.keys(val).length > 0) {
          fillFormData(formData);
        }
      });
    } else {
      if (val && Object.keys(val).length > 0) {
        fillFormData(val);
      }
    }
  },
  { immediate: true, deep: true },
);

// 填充表单数据
const fillFormData = (data: any) => {
  // console.log(data);
  if (!data || Object.keys(data).length === 0) return;

  // 基本信息
  Object.keys(formState).forEach((key: string) => {
    if (data[key] !== undefined) {
      (formState as any)[key] = data[key];
    }
  });
  // 供暖制冷信息
  Object.keys(formState_2).forEach((key: string) => {
    if (data[key] !== undefined) {
      (formState_2 as any)[key] = data[key];
    }
  });

  // 制冷信息
  Object.keys(formState_3).forEach((key: string) => {
    if (data[key] !== undefined) {
      (formState_3 as any)[key] = data[key];
    }
  });

  // 滞纳金信息
  Object.keys(formState_4).forEach((key: string) => {
    if (data[key] !== undefined) {
      (formState_4 as any)[key] = data[key];
    }
  });
  // 处理分时段优惠
  if (data.discountType === '分时段优惠') {
    data.discountList.forEach((item: any) => {
      formState_1_list.push({
        discountAmount: item.discountAmount,
        discountRate: item.discountRate,
        discountStartDate: item.discountStartDate,
        discountEndDate: item.discountEndDate,
      });
    });
    console.log(formState_1_list);
  } else if (data.discountType === '固定优惠') {
    formState_1.discountAmount = data.discountAmount;
    formState_1.discountRate = data.discountRate;
  }
  // console.log('formState:', formState);
  // console.log('formState_1:', formState_1);
  // console.log('formState_2:', formState_2);
  // console.log('formState_3:', formState_3);
  // console.log('formState_4:', formState_4);
};

const formRef = ref<FormInstance>();
const formRef2 = ref<FormInstance>();
const formRef3 = ref<FormInstance>();
const formRef4 = ref<FormInstance>();
const formRef5 = ref<FormInstance>();
const handleAfterOpenChange = (visible: boolean) => {
  emit('update:open', visible);
};

const handleClose = () => {
  emit('handleClose');
};

// 验证分时段优惠数组是否合法
const validateDiscountList = () => {
  if (formState.discountType === '分时段优惠') {
    // 检查数组是否为空
    if (formState_1_list.length === 0) {
      message.error('优惠信息不能为空');
      return false;
    }

    // 检查每个时段的数据是否完整
    for (const [i, item] of formState_1_list.entries()) {
      if (!item.discountAmount || !item.discountRate || !item.discountStartDate || !item.discountEndDate) {
        message.error(`第${i + 1}个优惠信息不完整`);
        return false;
      }
    }
  }
  return true;
};

// 处理提交表单
const handleSubmit = async () => {
  try {
    // 先校验分时段优惠数组
    if (!validateDiscountList()) {
      return;
    }

    // 创建所有表单的验证Promise数组
    const validationPromises = [
      formRef.value?.validate(),
      formState.discountType === '分时段优惠' ||
      formState.discountType === '固定优惠'
        ? formRef2.value?.validate()
        : Promise.resolve(),
      formRef3.value?.validate(),
      formRef4.value?.validate(),
      formRef5.value?.validate(),
    ];

    // 并行执行所有表单的验证
    await Promise.all(validationPromises);

    // 所有表单验证通过，合并表单数据
    const formData = {
      ...formState,
      ...(formState.discountType === '分时段优惠'
        ? { discountList: formState_1_list }
        : formState_1),
      ...formState_2,
      ...formState_3,
      ...formState_4,
      flag: formState_1_list.length
    };

    // 提交数据
    const res = await updateChargeStandardApi(formData);

    if (res) {
      message.success('修改成功');
      emit('handleSave');
      emit('handleClose');
      emit('handleSave')
    } else {
      message.error('修改失败');
    }
  } catch (error) {
    // 表单验证失败
    message.error('表单验证失败，请检查表单内容');
    console.error('表单验证失败:', error);
  }
};
</script>

<template>
  <div>
    <a-drawer
      :open="props.open"
      :title="`${props.title}计费规则`"
      placement="right"
      :width="1500"
      @after-open-change="handleAfterOpenChange"
      @close="handleClose"
      :footer-style="{ textAlign: 'right' }"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        layout="inline"
        :label-col="labelCol"
        :disabled="props.title === '查看'"
      >
        <a-form-item label="子公司" name="regionID">
          <a-select
            v-model:value="formState.regionID"
            placeholder="请选择子公司"
            style="width: 200px"
            :options="SelectOptions"
          />
        </a-form-item>
        <a-form-item label="标准名称" name="jfbzName">
          <a-input
            v-model:value="formState.jfbzName"
            placeholder="请输入标准名称"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="开始使用日期" name="beginUseDate">
          <a-date-picker
            v-model:value="formState.beginUseDate"
            placeholder="请选择开始使用日期"
            style="width: 200px"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="结束使用日期" name="endUseDate">
          <a-date-picker
            v-model:value="formState.endUseDate"
            placeholder="请选择结束使用日期"
            style="width: 200px"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="供暖年度" name="year">
          <a-input
            v-model:value="formState.year"
            placeholder="请输入供暖年度"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="最大抹零金额" name="maxTrimZeroMoney">
          <a-input-number
            v-model:value="formState.maxTrimZeroMoney"
            placeholder="请输入最大抹零金额"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="热费精确计算单位" name="precisionUnit">
          <a-select
            v-model:value="formState.precisionUnit"
            placeholder="请选择热费精确计算单位"
            style="width: 200px"
          >
            <a-select-option value="元">元</a-select-option>
            <a-select-option value="角">角</a-select-option>
            <a-select-option value="分">分</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="舍入计算规则" name="roundingCalculationRule">
          <a-select
            v-model:value="formState.roundingCalculationRule"
            placeholder="请选择舍入计算规则"
            style="width: 200px"
          >
            <a-select-option value="四舍五入">四舍五入</a-select-option>
            <a-select-option value="直接进位">直接进位</a-select-option>
            <a-select-option value="直接舍去">直接舍去</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否允许挂账" name="onAccount">
          <a-select
            v-model:value="formState.onAccount"
            placeholder="请选择是否允许挂账"
            style="width: 200px"
          >
            <a-select-option value="是">是</a-select-option>
            <a-select-option value="否">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="优惠类型" name="discountType">
          <a-select
            v-model:value="formState.discountType"
            placeholder="请选择优惠类型"
            style="width: 200px"
          >
            <a-select-option value="无优惠">无优惠</a-select-option>
            <a-select-option value="固定优惠">固定优惠</a-select-option>
            <a-select-option value="分时段优惠">分时段优惠</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="上传附件" name="url">
          <a-upload
            v-model:file-list="fileList"
            :before-upload="beforeUpload"
            :show-upload-list="false"
          >
            <a-button :icon="h(UploadOutlined)" type="primary">
              点击上传
            </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
      <a-collapse>
        <a-collapse-panel
          key="1"
          header="优惠规则"
          v-if="formState.discountType !== '无优惠'"
        >
          <a-form
            ref="formRef2"
            :model="
              formState.discountType === '分时段优惠'
                ? formState_1_list
                : formState_1
            "
            layout="inline"
            :label-col="labelCol"
            :disabled="props.title === '查看'"
          >
            <div
              v-if="formState.discountType === '分时段优惠'"
              class="flex flex-wrap"
            >
              <template v-if="formState_1_list.length > 0">
                <div
                  v-for="(item, index) in formState_1_list"
                  :key="index"
                  class="flex"
                >
                  <a-form-item label="优惠金额">
                    <a-input
                      v-model:value="formState_1_list[index].discountAmount"
                      placeholder="请输入优惠金额"
                      style="width: 200px"
                      type="number"
                      min="0"
                    />
                  </a-form-item>
                  <a-form-item label="优惠比例">
                    <a-input
                      v-model:value="formState_1_list[index].discountRate"
                      placeholder="请输入优惠比例"
                      style="width: 200px"
                      type="number"
                      min="0"
                      max="100"
                      suffix="%"
                    />
                  </a-form-item>
                  <a-form-item label="优惠时段">
                    <a-date-picker
                      v-model:value="formState_1_list[index].discountStartDate"
                      placeholder="开始时间"
                      value-format="YYYY-MM-DD"
                    />
                    <a-date-picker
                      v-model:value="formState_1_list[index].discountEndDate"
                      placeholder="结束时间"
                      value-format="YYYY-MM-DD"
                    />
                  </a-form-item>
                </div>
              </template>
              <a-form-item>
                <a-button
                  type="primary"
                  @click="onAdd"
                  :icon="h(PlusOutlined)"
                  style="margin-right: 8px"
                >
                  增加
                </a-button>
                <a-button
                  danger
                  @click="onDelete"
                  :icon="h(MinusOutlined)"
                  v-if="formState_1_list.length > 0"
                >
                  删除
                </a-button>
              </a-form-item>
            </div>

            <div v-if="formState.discountType === '固定优惠'" class="flex">
              <a-form-item
                label="优惠金额"
                name="discountAmount"
                :rules="rules_1.discountAmount"
              >
                <a-input
                  v-model:value="formState_1.discountAmount"
                  placeholder="请输入优惠金额"
                  style="width: 200px"
                  type="number"
                  min="0"
                />
              </a-form-item>
              <a-form-item
                label="优惠比例"
                name="discountRate"
                :rules="rules_1.discountRate"
              >
                <a-input
                  v-model:value="formState_1.discountRate"
                  placeholder="请输入优惠比例"
                  style="width: 200px"
                  type="number"
                  min="0"
                  max="100"
                  suffix="%"
                />
              </a-form-item>
            </div>
          </a-form>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="供热业务属性">
          <a-form
            ref="formRef3"
            :model="formState_2"
            :rules="rules_2"
            layout="inline"
            :label-col="labelCol"
            :disabled="props.title === '查看'"
          >
            <a-form-item label="供暖开始日期" name="heatingStartDate">
              <a-date-picker
                v-model:value="formState_2.heatingStartDate"
                placeholder="请选择供暖开始日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="供暖结束日期" name="heatingEndDate">
              <a-date-picker
                v-model:value="formState_2.heatingEndDate"
                placeholder="请选择供暖结束日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="停供申请开始日期" name="suspensionStartDate">
              <a-date-picker
                v-model:value="formState_2.suspensionStartDate"
                placeholder="请选择停供申请开始日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="停供申请结束日期" name="suspensionEndDate">
              <a-date-picker
                v-model:value="formState_2.suspensionEndDate"
                placeholder="请选择停供申请结束日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="居民面积单价" name="jmAreaPrice">
              <a-input-number
                v-model:value="formState_2.jmAreaPrice"
                placeholder="请输入居民面积单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="非居民面积单价" name="fjmAreaPrice">
              <a-input-number
                v-model:value="formState_2.fjmAreaPrice"
                placeholder="请输入非居民面积单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="经营面积单价" name="jyAreaPrice">
              <a-input-number
                v-model:value="formState_2.jyAreaPrice"
                placeholder="请输入经营面积单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="办公面积单价" name="bgAreaPrice">
              <a-input-number
                v-model:value="formState_2.bgAreaPrice"
                placeholder="请输入办公面积单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="供热天数" name="heatingDays">
              <a-input-number
                v-model:value="formState_2.heatingDays"
                placeholder="请输入供热天数"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="停供系数" name="suspensionRate">
              <a-input-number
                v-model:value="formState_2.suspensionRate"
                placeholder="请输入停供系数"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="供冷业务属性">
          <a-form
            ref="formRef4"
            :model="formState_3"
            :rules="rules_3"
            layout="inline"
            :label-col="labelCol"
            :disabled="props.title === '查看'"
          >
            <a-form-item label="制冷开始日期" name="coolinStartDate">
              <a-date-picker
                v-model:value="formState_3.coolinStartDate"
                placeholder="请选择制冷开始日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="制冷结束日期" name="coolingEndDate">
              <a-date-picker
                v-model:value="formState_3.coolingEndDate"
                placeholder="请选择制冷结束日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="居民制冷单价" name="jmCoolingPrice">
              <a-input-number
                v-model:value="formState_3.jmCoolingPrice"
                placeholder="请输入居民制冷单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="非居民制冷单价" name="fjmCoolingPrice">
              <a-input-number
                v-model:value="formState_3.fjmCoolingPrice"
                placeholder="请输入非居民制冷单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="经营制冷单价" name="jyCoolingPrice">
              <a-input-number
                v-model:value="formState_3.jyCoolingPrice"
                placeholder="请输入经营制冷单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="办公制冷单价" name="bgCoolingPrice">
              <a-input-number
                v-model:value="formState_3.bgCoolingPrice"
                placeholder="请输入办公制冷单价"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="制冷天数" name="coolingDays">
              <a-input-number
                v-model:value="formState_3.coolingDays"
                placeholder="请输入制冷天数"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-collapse-panel>
        <a-collapse-panel key="4" header="滞纳金属性">
          <a-form
            ref="formRef5"
            :model="formState_4"
            :rules="rules_4"
            layout="inline"
            :label-col="labelCol"
            :disabled="props.title === '查看'"
          >
            <a-form-item label="滞纳金计算方式" name="lateFeeMethod">
              <a-select
                v-model:value="formState_4.lateFeeMethod"
                placeholder="请选择滞纳金计算方式"
                style="width: 200px"
              >
                <a-select-option value="按天">按天</a-select-option>
                <a-select-option value="按月">按月</a-select-option>
                <a-select-option value="按年">按年</a-select-option>
                <a-select-option value="一次性">一次性</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="滞纳金开始日期" name="lateFeeStartDate">
              <a-date-picker
                v-model:value="formState_4.lateFeeStartDate"
                placeholder="请选择滞纳金开始日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="滞纳金结束日期" name="lateFeeEndDate">
              <a-date-picker
                v-model:value="formState_4.lateFeeEndDate"
                placeholder="请选择滞纳金结束日期"
                style="width: 200px"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="滞纳金收取范围" name="lateFeeRange">
              <a-input
                v-model:value="formState_4.lateFeeRange"
                placeholder="请输入滞纳金收取范围"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="滞纳金额" name="lateFeeAmount">
              <a-input-number
                v-model:value="formState_4.lateFeeAmount"
                placeholder="请输入滞纳金额"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="滞纳金比例" name="lateFeeRate">
              <a-input-number
                v-model:value="formState_4.lateFeeRate"
                placeholder="请输入滞纳金比例"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="滞纳金计算基数" name="lateFeeCalculationbase">
              <a-input-number
                v-model:value="formState_4.lateFeeCalculationbase"
                placeholder="请输入滞纳金计算基数"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-collapse-panel>
      </a-collapse>
      <template #footer>
        <a-space>
          <a-button @click="handleClose">取消</a-button>
          <a-button
            type="primary"
            @click="handleSubmit"
            v-if="props.title !== '查看'"
          >
            确定
          </a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>

<style scoped>
.ant-form-item {
  margin-bottom: 24px;
}

:deep(.ant-collapse-content-box) {
  padding: 10px 0 !important;
}

:deep(.ant-form-item) {
  margin-bottom: 20px !important;
}

:deep(.ant-drawer-footer) {
  text-align: right !important;
}
</style>
